<template>
  <div>
    <div class="counter"> 
      <!-- 单选复选框 @change表示复选框的选中状态改变事件-->
      <input
        type="checkbox"
        class="x"
        :id="'cb' + id"
        :checked="state"
        @change="stateChange"
      />
      <!-- 图片 -->
      <label :for="'cb' + id">
        <img :src="img" width="100%" height="100%" class="img"
      /></label>
      <!-- 标题 -->
      <div class="t">{{ title }}</div>
      <!-- 单价 -->
      <div class="p">￥{{ price }}</div>
      <!-- 加减按钮 -->
      <slot></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    // 商品标题
    title: "",
    // 商品价格
    price: "",
    // 商品数量
    count: "",
    // 商品id
    id: "",
    // 商品状态
    state: "",
    // 商品图片
    img: "",
  },

  methods: {
    // 只要复选框的选中状态发生了变化，就会调用这个处理函数
    stateChange(e) {
      // target表示哪个DOM元素触发了该事件  
      const newState = e.target.checked;
      // 触发自定义事件 将勾选状态传给父组件
      this.$emit("state-change", { id: this.id, value: newState });
    },
  },
};
</script>

<style lang="less" scoped>
.img {
  margin-top: -25px;
}
.x {
  position: relative;
  top: 0px;
  width: 18px;
  height: 18px;
}
.t,
.p {
  position: relative;
  left: 220px;
  text-align: left;
  line-height: 30px;
  width: 200px;
  height: 30px;
  color: #b71c1c;
}

.p {
  font-size: 13px;
  top: -105px;
}
.t {
  font-size: 13px;
  top: -120px;
}
.counter {
  user-select: none;
  width: 200px;
  height: 200px;
  border: 1px solid #b71c1c;
  margin: 100px 0 60px 30px;
}
</style>